import React from "react";
import omit from "lodash/omit.js";
import { Slider as AdminSlider } from "@webiny/admin-ui";
import type { FormComponentProps } from "~/types.js";

type Props = FormComponentProps & {
    // Component label.
    label?: string;

    // Is checkbox disabled?
    disabled?: boolean;

    // Description beneath the slider.
    description?: string;

    // The minimum value of the Slider.
    min?: number | string;

    // The maximum value of the Slider.
    max?: number | string;

    // A step to quantize values by.
    step?: number | string;

    // Displays the exact value of the Slider on the knob.
    discrete?: boolean;

    // Displays the individual step markers on the Slider track.
    displayMarkers?: boolean;

    // Function that gets triggered on each input.
    onInput?: (value: any) => void;

    readOnly?: boolean;
};

/**
 * @deprecated This component is deprecated and will be removed in future releases.
 * Please use the `Slider` component from the `@webiny/admin-ui` package instead.
 */
class Slider extends React.Component<Props> {
    onValueCommit = (value: number): void => {
        this.props.onChange && this.props.onChange(value);
    };

    onValueChange = (value: number): void => {
        this.props.onInput && this.props.onInput(value);
    };

    toFloat = (value: number | string | undefined, defaultValue = 0): number => {
        if (!value) {
            return defaultValue;
        }

        // Convert the value to a string before passing it to parseFloat
        const result = parseFloat(value.toString());

        // Check if the result is a valid number
        return isNaN(result) ? defaultValue : result;
    };

    public override render() {
        const { value, label, description, validation } = this.props;

        let sliderValue = value;
        if (value === null || typeof value === "undefined") {
            sliderValue = this.props.min || 0;
        }

        return (
            <AdminSlider
                {...omit(this.props, ["displayMarkers", "discrete", "onInput", "onChange"])}
                label={label}
                min={this.toFloat(this.props.min)}
                max={this.toFloat(this.props.max, 100)}
                step={this.toFloat(this.props.step, 1)}
                value={sliderValue}
                onValueCommit={this.onValueCommit}
                onValueChange={this.onValueChange}
                showTooltip={this.props.discrete}
                validation={validation}
                note={description}
            />
        );
    }
}

export default Slider;
